<template>
	<view class="">
		<!-- 顶部信息 -->
		<view class="HomeTop">
			<view class="logoView">
				<!-- logo -->
				<view class="logo">
					小U商城
				</view>
			</view>
			<view class="inputView">
				<input class="textinput" v-model="value" style="center" type="text" placeholder="寻找商品" />
			</view>
			<text class="pl" @click="search">搜索</text>
		</view>

		<!-- 顶部导航  scroll-view -->
		<view class="tabs">
			<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false">
				<text @click="change1" :class="current==-1?'uni-tab-item-title uni-tab-item-title-active':'uni-tab-item-title'"
				 class="uni-tab-item-title">
					推荐
				</text>
				<view class="uni-tab-item" data-current="0" v-for="(item,index) in datalist" :key="item.id">
					<text @click="change(index,item.id)" :class="current==index?'uni-tab-item-title uni-tab-item-title-active':'uni-tab-item-title'">
						{{item.catename}}
					</text>
				</view>
			</scroll-view>
		</view>
		<!-- 推荐轮播图 -->
		<view >
			<swiper class="banner" :indicator-dots="true" circular="true" :autoplay="true" :interval="2000" :duration="1000">
				<swiper-item v-for="(item,index) in bannerlist" :key="index">
					<view class="swiper-item" >
						<image :src="item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 功能导航开始 -->
		<!-- 功能导航 -->
		<view class="FunctNavCon">
			<view class="FunctNavLi">
				<image src="../../static/index/xiaohuoban.png" alt class="FunImg" />
				<p>限时抢购</p>
			</view>
			<view class="FunctNavLi">
				<image src="../../static/index/jifentixicopy.png" alt class="FunImg" />
				<p>积分商城</p>
			</view>
			<view class="FunctNavLi">
				<image src="../../static/index/lianxiwomen.png" alt class="FunImg" />
				<p>联系我们</p>
			</view>
			<view class="FunctNavLi" @click="jump()">
				<image src="../../static/index/-shangpinfenlei-gai.png" alt class="FunImg" />
				<p>限时抢购</p>
			</view>
		</view>

		<!-- 推荐部分 未写 -->
		<view class="HotGoods">
			<!-- 热推左侧 -->
			<view class="HotLeft">
				<view class="LimitedContent">
					<image class="LimitedImg" src="../../static/index/xianshi.jpg" alt />
					<label class="Limited">限时秒杀</label>
				</view>
				<p class="LimitedTitle">每天零点场，好货秒不停</p>
				<!-- 倒计时 -->
				<view class="LimitTimeAll">
					<label class="LimitTime">{{listtime[0]}} </label>
					<view class="maohao">:</view>
					<label class="LimitTime">{{listtime[1]}} </label>
					<view class="maohao">:</view>
					<label class="LimitTime">{{listtime[2]}} </label>
					<label class="Seckill">秒杀</label>
				</view>
				<image src="../../static/index/goods2.jpg" class="LimitedgoodsImg" alt="">
			</view>

			<!-- 热推右侧 -->
			<view class="HotRight">
				<!-- 右侧顶部部分 -->
				<view class="HotTop">
					<view class="HomeTopInfo">
						<view class="HomeTopInfoOne">
							<label class="BrandNew">品牌上新</label>
							<label class="Discount">折</label>
						</view>
						<view class="HomeTopRobbig">
							<label>每日九点，抢大牌</label>
						</view>
					</view>
					<!-- <div> -->
					<view class="Cloth">
						<image src="../../static/index/goods1.jpg" alt="">
					</view>

					<!-- </div> -->
				</view>
				<!-- 右侧底部 -->
				<view class="HotBottom">
					<view class="HotBottomLeft">
						<view class="HotBottomLeftInfo">
							<label class="HotBottomLeftInfoTitle">每日十件</label>
							<label class="HotBottomLeftInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomLeftImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
					<view class="HotBottomRight">
						<view class="HotBottomRightInfo">
							<label class="HotBottomRightInfoTitle">每日十件</label>
							<label class="HotBottomRightInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomRightImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播图2 -->
		<div class="Swiper2">
			<image class="Swiper2Img" src="../../static/index/swiper1.jpg" alt />
		</div>

		<!-- 底部商品列表 -->
		<view class="products">
			<!-- 商品标签 -->
			<view class="tags">
				<view :class="page==0?'active_tag_list tag_list':'tag_list'  " @click="chan(0)">
					<label for="">热门推荐</label>
				</view>
				<view :class="page==1?'active_tag_list tag_list':'tag_list'  " @click="chan(1)">
					<label for="">发现好货</label>
				</view>
				<view :class="page==2?'active_tag_list tag_list':'tag_list'  " @click="chan(2)">
					<label for="">只看专场</label>
				</view>
			</view>
			<!-- 标签对应的商品 -->
			<view class="tags_product"  v-if="list.length>0">
				<view class="product" v-for="(item,index) in list[page].content" :key="index" @click="ju(item.id)">
					<view class="GoodsLeft">
						<image class="GoodsImg" :src="item.img" alt />
					</view>
					<view class="GoodsCont">
						<view class="GoodConTit">{{item.goodsname}} </view>
						<view class="GoodsPrice">￥ {{item.price}}</view>
						<view class="yimai">已售8000件</view>
						<view class="Immed">立即抢购</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from "../../utils/config.js"
	export default {
		data() {
			return {
				datalist: [],
				bannerlist:[],
				current: -1,
				miaosha:"",
				listtime:[],
				page:0,
				list:[],
				value:""
			}
		},
		async onLoad() {
			// 获取导航
			let result = await this.$http("/api/getcate").catch(err => {
				console.log(err);
			})
			this.datalist = result.data.list
			
			// 获取轮播
			let sult = await this.$http("/api/getbanner").catch(err => {
				console.log(err);
			})
			sult.data.list.map(item=>{
				 item.img=baseUrl+item.img
			})
			
			this.bannerlist = sult.data.list
			
			
			
			// 推荐商品
			let si = await this.$http("/api/getindexgoods").catch(err => {
				console.log(err);
			})
			
			si.data.list.map(item=>{
				item.content.map(myitem=>{
					myitem.img=baseUrl+myitem.img
				})
			})
			console.log(si.data.list);
			this.list=si.data.list
			
			// 秒杀获取
			let su = await this.$http("/api/getseckill").catch(err => {
				console.log(err);
			})
			if(su.data.list==null){
				var hour="0"+0
				var mine="0"+0
				var second="0"+0
				this.listtime=[hour,mine,second]
			}else{
			var time=su.data.list[0].endtime
			this.getTime(time)
			
			setInterval(()=>{
				this.getTime(time)
			},1000)
			}
		},
		methods: {
			change(index,pid) {
				this.current = index
				uni.navigateTo({
					url:"../product/product?id="+pid
				})
			},
			change1() {
				this.current = -1
			},
			jump() {
				uni.navigateTo({
					url: "../classify/classify"
				})
			},
			getTime(endtime){
				let time=endtime-new Date().getTime()
				let timecha=Math.floor(time/1000)
				 let hour =Math.floor(timecha/3600)
				 let mine=Math.floor((timecha%3600)/60) 
				 let second=Math.floor(((timecha%3600)%60)) 
				   
			if(hour<10){
				hour="0"+hour
			}
			if(mine<10){
				mine="0"+mine
			}
			if(second<10){
				second="0"+second
			}
				this.listtime=[hour,mine,second]
			},
			chan(index){
				this.page=index
			},
			ju(id){
				uni.navigateTo({
					url:"/pages/details/details?id="+id
				})
			},
			search(){
				if(this.value==""){
					uni.showToast({
						title:"请输入商品",
						icon:"none"
					})
				}else{
					uni.navigateTo({
						url:"../search/search?search="+this.value
					})
				}
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/index.css");
	.pl{
		border: 1px solid gray;
		padding: 8rpx;
		border-radius: 8rpx;
	}
</style>
